<template>
	<view class="u-page fullpage">
		<video
			id="prew_video"
			direction="0"
			:src="videoSrc"
			@fullscreenchange="bindVideoScreenChange"
			:poster="poster"
			custom-cache="false"
			object-fit="cover"
			style="position: fixed;left: -50%; top: -50%;"
			controls
		></video>
		<zx-nav title="售后详情" bg="#fff"></zx-nav>
		<view class="goodsinfo">
			<view class="u-flex card justify-between statusbar">
				<view class="title">售后状态</view>
				<view class="u-primary ml10">{{ aftersaleGoods.status_ || '' }}</view>
			</view>
			<view class="u-flex card mt20">
				<view class="imgbox"><image :src="aftersaleGoods.product_img[0] + '?imageView2/0/w/140'" mode="widthFix"></image></view>
				<view class="flex-sub u-flex  u-flex-column">
					<view class="flex justify-between align-end">
						<view class="name ">
							<text>{{ aftersaleGoods.product_name || '' }}</text>
							<text class="u-primary">{{ aftersaleGoods.product_dengji_ || '' }}</text>
						</view>
						<view>×{{ aftersaleGoods.qty }}</view>
					</view>
					<view class="num flex-sub">{{ aftersaleGoods.supplier_name || '' }}</view>
					<view>
						<text class="unit">￥</text>
						{{ aftersaleGoods.price }}
					</view>
				</view>
			</view>
			<view class="comment-info ">
				<div class="card">
					<view class="u-flex u-col-center u-row-between ">
						<view class="title">下单时间</view>
						<view>{{ aftersaleGoods.order_time || '' }}</view>
					</view>
					<view class="u-flex u-col-center u-row-between">
						<view class="title">申请金额</view>
						<view>{{ aftersaleGoods.amount || 0 }}</view>
					</view>
					<view class="u-flex u-col-center u-row-between ">
						<view class="title">申请时间</view>
						<view>{{ aftersaleGoods.created_at || '' }}</view>
					</view>
					<view class="u-flex u-col-center u-row-between ">
						<view class="title">申请原因</view>
						<view>{{ aftersaleGoods.info || '' }}</view>
					</view>
				</div>
				<div class="card mt20" v-if="aftersaleGoods.img_url && aftersaleGoods.img_url.length > 0">
					<view class="title">售后图片</view>
					<view class="uploadImg u-flex u-flex-wrap">
						<view
							class="tui-image-item"
							:class="{ videobox: item.type == 'video' }"
							v-for="(item, index) in aftersaleGoods.img_url"
							:key="index"
							@tap="previewMedia(aftersaleGoods.img_url, index)"
						>
							<image v-if="item.type == 'image'" :src="item.url + '?imageView2/0/w/180'" class="tui-item-img" mode="aspectFill"></image>
							<template v-else>
								<image :src="item.url + '?vframe/jpg/offset/1'" class="tui-item-img" mode="aspectFill"></image>
								<image class="play" src="/static/order/play.png" mode="widthFix"></image>
							</template>
						</view>
					</view>
				</div>

				<template v-if="aftersaleGoods.status != 1">
					<view class="card mt20">
						<view class="u-flex u-col-center u-row-between ">
							<view class="title">处理结果</view>
							<view>{{ aftersaleGoods.order_time || '' }}</view>
						</view>
						<view class="u-flex u-col-center u-row-between ">
							<view class="title">处理时间</view>
							<view>{{ aftersaleGoods.updated_at || '' }}</view>
						</view>
						<view class="u-flex u-col-center u-row-between ">
							<view class="title">赔付金额</view>
							<view>{{ aftersaleGoods.tk_amount || 0 }}</view>
						</view>
						<view class="u-flex u-col-center u-row-between " v-if="aftersaleGoods.remark">
							<view class="title">处理意见</view>
							<view>{{ aftersaleGoods.remark }}</view>
						</view>
					</view>
				</template>
				<div class="card mt20" v-if="(aftersaleGoods.remark_img && aftersaleGoods.remark_img.length > 0) || aftersaleGoods.remark_video">
					<view class="title">平台反馈</view>
					<view class="uploadImg u-flex u-flex-wrap">
						<view class="tui-image-item" v-for="(item, index) in aftersaleGoods.remark_img" :key="index" @tap="previewImage(aftersaleGoods.remark_img, index)">
							<image :src="item + '?imageView2/0/w/180'" class="tui-item-img" mode="aspectFill"></image>
						</view>
						<view class="tui-image-item videobox" v-if="aftersaleGoods.remark_video" @tap="previewVideo([aftersaleGoods.remark_video], 0)">
							<image :src="aftersaleGoods.remark_video + '?vframe/jpg/offset/1'" class="tui-item-img" mode="aspectFill"></image>
							<image class="play" src="/static/order/play.png" mode="widthFix"></image>
						</view>
					</view>
				</div>
				<myassistant></myassistant>
			</view>
		</view>
	</view>
</template>
<script>
import myassistant from '@/components/myassistant';
export default {
	data() {
		return {
			tabIndex: 1,
			type: 0,
			aftersaleGoods: {},
			isVideo: false,
			videoSrc: '',
			poster: ''
		};
	},
	components: {
		myassistant
	},

	onLoad(options) {
		this.orderEvaluate(options.order_product_id);
	},
	onReady: function(res) {
		// #ifndef MP-ALIPAY
		this.videoContext = uni.createVideoContext('prew_video');
		// #endif
	},
	methods: {
		//订单详情
		orderEvaluate(order_product_id) {
			let $me = this;
			$me.$getAction($me.$api.orderAftersale + order_product_id).then(da => {
				if (da.code == 0) {
					let aftersaleGoods = da.data;
					if (aftersaleGoods) {
						let img_url = aftersaleGoods.img_url.map(item => item);
						if (img_url && img_url.length > 0) {
							// this.isVideo = img_url[0].indexOf('mp4') > -1;
							img_url = img_url.map(item => {
								return {
									url: item,
									type: item.indexOf('mp4') > -1 ? 'video' : 'image',
									poster: item.indexOf('mp4') > -1 ? item + '?vframe/jpg/offset/1' : item
								};
							});
							aftersaleGoods.img_url = [...img_url];
						}
						this.aftersaleGoods = { ...aftersaleGoods };
					}
				}
			});
		},
		//复制单号
		copyOrder(value) {
			uni.setClipboardData({
				data: value,
				success: function() {
					console.log('success');
				}
			});
		},
		previewMedia(imageList, index) {
			uni.previewMedia({
				current: index,
				loop: true,
				sources: imageList
			});
		},
		previewImage: function(imageList, index) {
			if (!imageList.length) return;
			uni.previewImage({
				current: imageList[index],
				loop: true,
				urls: imageList
			});
		},
		previewVideo(imageList, index) {
			this.poster = imageList[index] + '?vframe/jpg/offset/1';
			var videoContext = this.videoContext;
			this.videoSrc = '';
			this.videoSrc = imageList[index];
			videoContext.seek(0);
			videoContext.play();
			setTimeout(function() {
				videoContext.requestFullScreen();
			}, 100);
		},

		/**
		 * 全屏改变
		 */
		bindVideoScreenChange: function(e) {
			var status = e.mp.detail.fullScreen;
			console.log(status);
			if (!status) {
				var videoContext = this.videoContext;
				videoContext.seek(0);
				videoContext.pause();
			} else {
				this.videoContext.play();
			}
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
	width: 100%;
	background: #ededed;
	.card {
		padding: 28upx;
	}
	.goodsinfo {
		// background: #fff;
		color: $u-content-color;
		padding: 36upx 30upx;
		font-size: 24upx;
		.name {
			font-size: 32upx;
			font-weight: 500;
			color: $u-main-color;
		}

		.imgbox {
			width: 160upx;
			height: 160upx;
			margin-right: 25upx;
			image {
				height: 100%;
				width: 100%;
				display: block;
				border-radius: 8upx;
			}
		}

		.num {
			padding: 10upx 0;
		}
		.statusbar,
		.comment-info {
			font-size: 28upx;
			color: #999;
			.title {
				color: #000;
			}
		}
		.comment-info {
			margin-top: 20upx;

			.u-flex {
				margin-bottom: 36upx;
			}
		}
		.comment-con {
			margin-top: 50upx;
			color: #636366;
			font-size: 32upx;
			line-height: 52upx;
		}
		.uploadImg {
			margin: 0 !important;
			.tui-image-item {
				width: calc((100vw - 156upx) / 3);
				height: calc((100vw - 156upx) / 3);
				// margin-right: 30rpx;
				display: inline-block;
				margin: 10upx 0;
				// margin-bottom: 20rpx;
			}

			.tui-image-item:nth-of-type(3n + 2) {
				margin: 10upx 20upx;
			}

			.tui-item-img {
				width: 100%;
				height: 100%;
				display: block;
				border-radius: 10upx;
				z-index: 0;
			}
			.videobox {
				position: relative;
				image {
					width: 100%;
					height: 100%;
					margin: 0;
					&.play {
						position: absolute;
						width: 80upx;
						width: 80upx;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}
		}
	}

	.main {
		overflow: auto;
		margin-top: 20upx;
	}
}
</style>
